<template>
	<div>
		<view class="messbody">
			 <view v-for="(item,index) in list" :key="index" class="mess " :class="{right:user.userid==item.userid}">
			 	 
				 <image v-if="user.userid==item.userid" class="photo" :src="user.photo"></image>
				 <image v-else class="photo" :src="toUser.photo"></image>
				 <view class="content">
				 	
					 <span v-if="item.type=='txt'">{{item.content}}</span>
						 <image mode="widthFix" v-if="item.type=='img'" class="img" :src="item.content"></image>
				 </view>
			 </view>
			<!-- <view class="mess right">
			 	 <image class="photo" src="http://www.eshareedu.cn/upload/book/2020/11/08/20201108180723367.jpg"></image>
			 				 <view class="content">
			 				 	你哈说到底
			 				 </view>
			 </view> -->
		</view>
		<div class="footer">
			<view class="audio">
				语音
			</view>
			 <input v-model="content" type="text" value="" />
			 <button @click="uploadImg" class="rightBtn" type="default">图片</button>
			 
			 <button class="rightBtn" v-show="isSendBtn"  type="default">+</button>
			 <button @click="sendMessage" class="rightBtn"  v-show="!isSendBtn"  type="default">发送</button>
		</div>
	</div>
</template>

<script>
	import {IMGBASEURLS} from '../../utils/config.js'
	import {upload,chooseImage} from '../../utils/upload.js'
	export default{
		data(){
			return{
				list:[],
				isSendBtn:false,
				content:"",
				user:{userid:"m100",photo:"http://www.eshareedu.cn/upload/images/wlogo.png"},
				toUser:{userid:"m433",photo:"http://www.eshareedu.cn/upload/book/2020/11/08/20201108181506336.jpg"}
			}
		},
		created(){
			this.connectSocket();
		},
		methods:{
			login(){
				
				let msg={ userid:this.user.userid,type: "login" };
				uni.sendSocketMessage({
                    data: JSON.stringify(msg)
             });
				
			},
			async uploadImg() {
			
				let that = this;
				const res = await chooseImage(1);
				console.log(1111,res)
				
				res.forEach(item => {
			
					upload(item).then(response => {
			
						console.log(11222, response.errCode)
						if (response.errCode == 10000) {
							 
							 that.sendImgMessage(IMGBASEURLS+response.data);
							console.log(11, IMGBASEURLS+response.data)
			
						}
			
					})
			
				})
			 
			
			},
			sendImgMessage(url){
				
				 
				let msg={ userid:this.user.userid, toUserid:this.toUser.userid, content:url, type: "img" }
				uni.sendSocketMessage({data:JSON.stringify(msg)});
			},
			sendMessage(){
				
				console.log("正在发送")
				
				let msg={ userid:this.user.userid, toUserid:this.toUser.userid, content:this.content, type: "txt" }
				uni.sendSocketMessage({data:JSON.stringify(msg)});
				this.content = ""
			},
			connectSocket(){
				let that=this;
				console.log(123);
				uni.connectSocket({
				  url: 'ws://39.99.240.103:5000'
				});
				uni.onSocketMessage(function (res) {
					
					if(res.data && JSON.parse(res.data).content){
						that.list.push(JSON.parse(res.data))
					}

				    console.log('收到服务器内容：' + res.data);
				});
				uni.onSocketOpen(function (res) {
				   console.log("连接成功")
				   that.login();
				});

			}
		}
	}
</script>

<style lang="less">
	.messbody{
		background: #e7ebee;
		width: 100%;
		height: 100vh;
		padding-top: 20rpx;
	.mess{
		margin: 0rpx 20rpx 30rpx 20rpx;
		display: flex;
		.img{
			max-width: 300rpx;
			height: auto;
		}
		.photo{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			 margin-left: 20rpx;
		}
		&.right{
			  flex-direction: row-reverse;
			  	.content{
					background: #60c696;
					&::before {
						content: '';
						position: absolute;
					    width: 0;
					    height: 0;
						left:initial;
						 border-right: initial;
						right:-8rpx;
					    border-top: 10rpx solid transparent;
					    border-left: 8rpx solid #60c696;
					    border-bottom: 10rpx solid transparent;
					}
				}
		}
		.content{
			 
			background: #fff;
			padding:20rpx ;
			font-size: 14px;
			border-radius: 5rpx;
			position: relative;
			&::before {
				content: '';
				position: absolute;
			    width: 0;
			    height: 0;
				left:-8rpx;
			    border-top: 10rpx solid transparent;
			    border-right: 8rpx solid #fff;
			    border-bottom: 10rpx solid transparent;
			}
		}
	}
	}
	.footer{
		background: #f3f4f6;
		height: 136rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		.audio{
			width: 120rpx;
			height: 50rpx;
		}
		input{
			height: 80rpx;
			background: #fff;
			flex: 1;
		}
		.rightBtn{
			width:120rpx;
				height: 50rpx;
				font-size: 12px;
				margin-left: 10rpx;
			}
		
	}
</style>
